<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css"
        media="all">
  <link rel="stylesheet" href="../css/public.css" media="all">
  <style>
    .layui-table-cell img{
      text-align: center;
      height: auto;
      width: auto;
      white-space: normal;
      max-height: 25px;
      max-width: 30px;
      border-radius:50%;
      border: 1px solid salmon;
    }
  </style>

</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索会员信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label  class="layui-form-label">会员账号</label>
              <div class="layui-input-inline">
                <input id="memberNumber" type="text" name="memberNumber" autocomplete="off"
                       class="layui-input">
              </div>
            </div>

            <div class="layui-inline">
              <label  class="layui-form-label">会员手机号</label>
              <div class="layui-input-inline">
                <input id="memberPhone" type="text" name="memberPhone" autocomplete="off"
                       class="layui-input">
              </div>
            </div>

            <div class="layui-inline">
              <button id="serachBtn" type="button"
                      class="layui-btn layui-btn-primary" lay-submit
                      lay-filter="data-search-btn">
                <i class="layui-icon"></i> 搜 索
              </button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <table class="layui-hide" id="currentTableId"
           lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit" id="edit">编辑</a>
    </script>


    <!-- 定义编辑时弹出窗口的模板 -->
    <script type="text/html" id="memberForm">

      <form class="layui-form"  lay-filter="memberForm">

        <div class="layui-form-item">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline">
            <input id="id" type="hidden"  name="id" >
            <input id="username" type="text" name="username" autocomplete="off" placeholder="请输入用户名" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
              <div>
                <input id="password" type="password" name="password" class="layui-input demo-phone"  >
              </div>
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <input  id="sex1" type="radio" name="sex" value="男" title="男" checked="">
            <input  id="sex2" type="radio" name="sex" value="女" title="女">
          </div>
        </div>


        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-inline">
              <input id="birthday" type="text" name="birthday"   class="layui-input demo-phone" placeholder="yyyy-MM-dd">
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
              <select id="selectStatus" name="selectStatus">
                <option value="1" id="start">启用</option>
                <option value="2" id="stop" >停用</option>
              </select>
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline">
              <input id="accountNumber" type="text" name="accountNumber"   class="layui-input demo-phone">
            </div>
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
              <input id="phone" type="text" name="phone"   class="layui-input demo-phone">
            </div>
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">头像</label>
          <div class="layui-input-inline">
            <img id="avatar" width="50px" height="50px" src="">
            <input type="hidden" name="avatar" id="avatarAddress">
          </div>
        </div>

        <br>

        <div class="layui-form-item">
          <div class="layui-input-block">
            <button id="passwordReset" type="button" class="layui-btn">密码重置</button>
            <button id="run" type="button" class="layui-btn layui-btn-warm">执行</button>
          </div>
        </div>
      </form>
    </script>
  </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script >
  layui.use([ 'form', 'table', 'layer', 'laydate' ,'upload'], function() {
    var $ = layui.jquery, form = layui.form, table = layui.table;
    layer = layui.layer;
    laydate = layui.laydate;
    var upload = layui.upload;

    $("#serachBtn").on("click", function() {
      table.render({
        elem : '#currentTableId',
        url : '/member/list',//请求放在表格中的数据
        where:{
          memberNumber:$("#memberNumber").val(),
          memberPhone:$("#memberPhone").val()
        },
        toolbar : '#toolbarDemo',
        defaultToolbar : [ 'filter', 'exports', 'print', {
          title : '提示',
          layEvent : 'LAYTABLE_TIPS',
          icon : 'layui-icon-tips'
        } ],
        cols : [ [ {
          type : "checkbox",
          width : 50
        }, {
          field : 'id',
          title : 'ID',
          sort : true
        },{
          field : 'avatar',
          title : '头像',
          templet: '<div><img src="{{d.avatar}}"></div>'
        },{
          field : 'username',
          title : '用户名'
        }, {
          field : 'sex',
          title : '性别'
        }, {
          field : 'birthday',
          title : '生日'
        },  {
          field : 'password',
          title : '密码'
        },{
          field : 'joinTime',
          title : '注册时间'
        },{
          field : 'status',
          title : '状态'
        },{
          field : 'accountNumber',
          title : '会员账号'
        },{
          field : 'phone',
          title : '会员手机号'
        },{
          title : '操作',
          toolbar : '#currentTableBar',
          align : "center"
        } ] ],
        limits : [ 5,10, 15 ],
        limit : 15,
        page : true,
        skin : 'line'
      });
    }).click();

    //给操作框绑定事件
    table.on('tool(currentTableFilter)', function(obj) {
      //如果点的时编辑按钮
      if (obj.event === 'edit') {
            $.post("/member/selectById?id="+obj.data.id,function(m){
              if(m.code==0) {
                //弹窗
                layer.open({
                  type: 1,
                  title: "编辑信息",
                  area: ["450px", "500px"],
                  content: $("#memberForm").html()
                });
                $("#password").attr("disabled",true);
                $("#username").attr("disabled",true);
                $("#sex1").attr("disabled",true);
                $("#sex2").attr("disabled",true);
                $("#birthday").attr("disabled",true);
                $("#accountNumber").attr("disabled",true);
                $("#phone").attr("disabled",true);
                $("#avatar").attr("disabled",true);
                form.render();
                $("#avatar").attr("src", m.data.avatar);
                if (m.data.status==='启用') {
                  $("#start").attr("selected",true);
                }else {
                  $("#stop").attr("selected",true);
                }
                form.val("memberForm", m.data);
              }
              else{
                layer.msg(m.msg);
              }

              //密码重置按钮绑定事件
              $("#passwordReset").on("click", function() {
                layer.confirm("确认要将该会员密码重置？",function () {
                  $.post("/member/updatePassword?id=" + obj.data.id, function () {
                    layer.closeAll();
                    layer.msg("密码已经重置为123!")
                    $("#serachBtn").click();
                  });
                });
              });
              //执行按钮绑定事件
              $("#run").on("click",function (){
                var status=$("#selectStatus").val();
                $.post("/member/updateStatus?status="+status+"&&id="+obj.data.id,function (){
                  layer.closeAll();
                  $("#serachBtn").click();
                  layer.msg("执行成功!")
                });
              });
            });
      }
    });
  });
</script>

</body>
</html>